//从vue-router框架导入createRouter(), createWebHistory()函数
import { createRouter, createWebHistory } from "vue-router";

//路由： /dashboard   /user/detail/1   /order/item/1209

//定义一个router对象
const router = createRouter({
    //路由地址的历史
    history: createWebHistory(),

    //配置路由，是一个数组，因为一个项目中，路由地址非常多
    routes: [
        {
            //浏览器访问的路由地址是斜杠/
            path: '/',
            //当你访问斜杆的时候，就渲染LoginView.vue这个页面
            component : () => import('@/view/LoginView.vue'),
        },
        {
            path: '/dashboard',
            component : () => import('@/view/DashboardView.vue'),
            children : [ //子路由可以配置多个，所以是数组
                {
                    //子路由前面没有斜杠
                    path: '',
                    //当你访问 /dashboard 时，渲染StatisticView.vue页面
                    component : () => import('@/view/StatisticView.vue'),
                },
                {
                    //子路由前面没有斜杠
                    path: 'user',
                    //当你访问 /dashboard/user 时，渲染UserView.vue页面
                    component : () => import('@/view/UserView.vue'),
                },
                {
                    //子路由前面没有斜杠
                    path: 'activity',
                    //当你访问 /dashboard/activity 时，渲染ActivityView.vue页面
                    component : () => import('@/view/ActivityView.vue'),
                },
                {
                    //子路由前面没有斜杠, :id是一个动态变量，这种方式的路由也叫动态路由
                    path: 'activity/detail/:id',
                    //当你访问 /dashboard/activity/detail/21 时，渲染ActivityDetailView.vue页面
                    component : () => import('@/view/ActivityDetailView.vue'),
                },
                {
                    //子路由前面没有斜杠
                    path: 'activity/add',
                    //当你访问 /dashboard/activity/add 时，渲染ActivityItemView.vue页面
                    component : () => import('@/view/ActivityItemView.vue'),
                },
                {
                    //子路由前面没有斜杠, :id是一个动态变量，这种方式的路由也叫动态路由
                    path: 'activity/edit/:id',
                    //当你访问 /dashboard/activity/edit/21 时，渲染ActivityItemView.vue页面
                    component : () => import('@/view/ActivityItemView.vue'),
                },
                {
                    //子路由前面没有斜杠
                    path: 'clue',
                    //当你访问 /dashboard/clue 时，渲染ClueView.vue页面
                    component : () => import('@/view/ClueView.vue'),
                },
                {
                    //子路由前面没有斜杠
                    path: 'clue/add',
                    //当你访问 /dashboard/clue/add 时，渲染ClueItemView.vue页面
                    component : () => import('@/view/ClueItemView.vue'),
                },
                {
                    //子路由前面没有斜杠, :id是一个动态变量，这种方式的路由也叫动态路由
                    path: 'clue/edit/:id',
                    //当你访问 /dashboard/clue/edit/12 时，渲染ClueItemView.vue页面
                    component : () => import('@/view/ClueItemView.vue'),
                },
                {
                    //子路由前面没有斜杠, :id是一个动态变量，这种方式的路由也叫动态路由
                    path: 'clue/detail/:id',
                    //当你访问 /dashboard/clue/detail/12 时，渲染ClueDetailView.vue页面
                    component : () => import('@/view/ClueDetailView.vue'),
                },
                {
                    //子路由前面没有斜杠, :id是一个动态变量，这种方式的路由也叫动态路由
                    path: 'customer',
                    //当你访问 /dashboard/customer 时，渲染CustomerView.vue页面
                    component : () => import('@/view/CustomerView.vue'),
                }
                ,
                {
                    //子路由前面没有斜杠, :id是一个动态变量，这种方式的路由也叫动态路由
                    path: 'customer/detail/:id',
                    //当你访问 /dashboard/customer 时，渲染CustomerView.vue页面
                    component : () => import('@/view/CustomerDetailView.vue'),
                }
            ]
        },
        {
            path: '/hello',
            component : () => import('@/components/HelloWorld.vue'),
        }
    ]
})

//导出router对象，那么其他地方就可以导入
export default router;